<template>
  <div>
    <el-form ref="registerForm" :model="registerDto" :rules="RegisterDto_Rules" auto-complete="on" label-position="top" hide-required-asterisk>
      <el-form-item prop="phoneNumber">
        <el-input v-model="registerDto.phoneNumber" :placeholder="$t('login.username')" name="phoneNumber" type="text" auto-complete="on" />
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model.trim="registerDto.code" style="width: 70%" placeholder="短信验证码" class="verifycode_input" type="text" />
        <el-button v-if="!isSendMsg" type="text" @click="sendPhoneNum">
          {{ $t('register.sendMSG') }}
        </el-button>
        <el-button v-else type="text" class="noClick">
          {{ reSendTime }}(s)
        </el-button>
      </el-form-item>
      <el-form-item prop="password">
        <el-input ref="password" v-model="registerDto.password" :placeholder="$t('login.password')" type="password" name="password" tabindex="2" />
      </el-form-item>
    </el-form>
    <slot name="REPASSWORD" />
    <slot name="REGISTER" />
  </div>
</template>
<script>
import { RegisterDto_Rules } from '@/lib/validate/register/index.js';
import { RegisterUserInput } from '@/lib/form/swaggerForm.js';
import { api_POST_UsersRegisterSmsCode } from '@/extend/api/platform/register';
export default {
  name: 'MobileRegister',
  data() {
    return {
      RegisterDto_Rules: new RegisterDto_Rules(),
      registerDto: new RegisterUserInput(),
      loading: false,
      isSendMsg: false, // 是否已经发送验证码
      reSendTime: 0 // 验证码倒计时
    };
  },
  methods: {
    routerRedirect(path) {
      this.$router.push({
        path: path
      });
    },
    // 发送手机验证码
    sendPhoneNum() {
      // 校验phoneNumber的值是否有效
      this.$refs.registerForm.validateField('phoneNumber', phoneError => {
        if (!phoneError) {
          // phoneNumber手机号码本地校验已通过
          api_POST_UsersRegisterSmsCode({
            phoneNumber: this.registerDto.phoneNumber,
            isNew: true
          }).then(res => {
            if (res.result === 'Success') {
              this.$message({ type: 'success', message: '手机验证码已发送' });
              // 同时执行倒计时
              this.countDownTime(60);
            } else if (res.result === 'AlreadyExists') {
              this.$message({ type: 'warning', message: '用户已经存在' });
            } else if (res.result === 'InvalidVerificationCode') {
              this.$message({ type: 'warning', message: '无效的验证码' });
              // 同时执行倒计时
              this.countDownTime(60);
            }
          });
        } else {
          return false;
        }
      });
    },
    // 短信倒计时
    countDownTime(num) {
      let timer = null;
      clearInterval(timer);
      this.isSendMsg = true;
      this.reSendTime = num;
      timer = setInterval(() => {
        this.isSendMsg = true;
        this.reSendTime -= 1;
        if (this.reSendTime <= 0) {
          clearInterval(timer);
          this.isSendMsg = false;
        }
      }, 1000);
    }
  }
};
</script>
<style lang="scss">
.permission-container .el-input.verifycode_input {
  width: 100%;
  display: table;
  padding-left: 30px;
  height: 40px;
  .el-button {
    width: 115px;
    height: 40px;
  }
  .el-button.noClick {
    cursor: auto;
  }
}
.verifyCode_icon {
  padding: 1px 5px 5px 14px;
  color: #889aa4;
  vertical-align: middle;
  width: 30px;
  display: inline-block;
  position: absolute;
}
</style>
